<template>
  <div class="card-container">
    <LearningPage v-if="currentView === 'learning'" @select-card="handleSelectCard" />
    <StudyDetailPage 
      v-else-if="currentView === 'study-detail'"
      :selected-card="selectedCard"
      @edit-card="handleEditCard"
      @back="currentView = 'learning'"
    />
    <MarkdownEditor 
      v-else-if="currentView === 'markdown-editor'"
      :card-data="editingCard"
      @save="handleSaveCard"
      @back="currentView = 'study-detail'"
    />
  </div>
</template>

<script>
import LearningPage from './LearningPage.vue'
import StudyDetailPage from './StudyDetailPage.vue'
import MarkdownEditor from './MarkdownEditor.vue'

export default {
  name: 'CardView',
  components: {
    LearningPage,
    StudyDetailPage,
    MarkdownEditor
  },
  data() {
    return {
      currentView: 'learning',
      selectedCard: null,
      editingCard: null
    }
  },
  methods: {
    handleSelectCard(card) {
      this.selectedCard = card
      this.currentView = 'study-detail'
    },
    handleEditCard(card) {
      this.editingCard = card
      this.currentView = 'markdown-editor'
    },
    handleSaveCard(card) {
      // 处理保存卡片的逻辑
      this.currentView = 'study-detail'
    }
  }
}
</script>

<style scoped>
.card-container {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  /* padding: 20px; */
}
</style> 